<template>
	<view class="container">
		<div v-if="noticeList.length != 0" :data="noticeList" class="notice-list-body">
			<div v-for="(item, index) in noticeList" :key="index">
				<div v-if="item.status == 1" @mouseenter="handleMouseOver(item, index)">
					<uni-card class="notice-list-item">
						<div style="padding: 14px;">
							<h3 class="notice-list-title">{{ "系统通知" }}
								<span class="notice-check-status">
									{{ item.updateTime ? item.updateTime : item.createTime }}
									<span style="color: red;float: right;font-size:16px;"
										v-if="item.status == 1">New</span>
								</span>
							</h3>
							<div class="notice-list-box" />
							<span class="notice-list-content" v-html="item.noticeContent" />
						</div>
					</uni-card>
				</div>
				<div v-else>
					<uni-card class="notice-list-item">
						<div style="padding: 14px;">
							<h3 class="notice-list-title">{{ "系统通知" }}
								<span class="notice-check-status">
									{{item.updateTime ? item.updateTime : item.createTime }}
									<span style="color: red;float: right;font-size:16px;"
										v-if="item.status == 1">New</span>
								</span>
							</h3>
							<div class="notice-list-box" />
							<span class="notice-list-content" v-html="item.noticeContent" />
						</div>
					</uni-card>
				</div>
			</div>

		</div>
		<div v-else class="notNotification">暂无通知</div>
	</view>
</template>

<script>
	import {
		listNoticeAll,
		sureSotificationById,
		adminSureSotificationById,
		listAdminNoticeAll
	} from "@/api/client/notice.js"
	import {
		getUser,
		getLoginPeople
	} from '@/utils/auth'

	export default {
		data() {
			return {
				notList: [],
				// 滚动分页参数
				InfinitePage: 1,
				// 达到最大页的判断
				maxTip: false,
				// 最大页数
				maxPage: 0,
				// 无限滚动是否可用
				Infinite: true,
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				noticeDrawer: false,
				// 查看详细
				readInfo: false,
				// 通知列表
				noticeList: [],
				noticeInfo: [],
				// 日期范围
				dateRange: [],
				// 通知列表总条数
				noticeTotal: 0,
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 查询条件
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					title: "",
					content: "",
				},
			}
		},
		onLoad() {
			this.getNoticeList();
		},
		methods: {
			handleMouseOver(row, key) {
				this.noticeList[key].status = 2;
			},
			// 获取通知列表
			getNoticeList() {
				this.loading = true;
				let data = {}
				if (getLoginPeople() == "Teacher") {
					// var user = getUser();
					// data = {
					// 	viewerUserId: user.userId
					// 
					listAdminNoticeAll(data).then((response) => {
						this.noticeList = response.rows;
						if (response.total % 10 != 0) {
							this.maxPage = parseInt(response.total / 10 + 1);
						} else {
							this.maxPage = parseInt(response.total / 10);
						}
						if (this.queryParams.pageNum >= this.maxPage) {
							this.Infinite = true;
							this.maxTip = true;
						} else {
							this.Infinite = false;
							this.maxTip = false;
						}
						this.loading = false;
					});
					
					adminSureSotificationById(123).then(response => {
					});
				}else{
					listNoticeAll(data).then(response => {
						this.noticeList = response.rows;
						if (response.total % 10 != 0) {
							this.maxPage = parseInt(response.total / 10 + 1);
						} else {
							this.maxPage = parseInt(response.total / 10);
						}
						if (this.queryParams.pageNum >= this.maxPage) {
							this.Infinite = true;
							this.maxTip = true;
						} else {
							this.Infinite = false;
							this.maxTip = false;
						}
						this.loading = false;
					});
					
					sureSotificationById(123).then(response => {
					});
				}
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss">
	.notice-check-box>.el-dialog>.el-dialog__body {
		padding-top: 0px;
	}
</style>

<style lang="scss" scoped>
	.app-container {
		padding: 0px;
		overflow: auto;
		padding-bottom: 50px;
	}

	.notice-list-item {
		margin: 0px 40px 40px 40px;
	}

	.notice-list-item:hover {
		background-color: #d6d6d1;
		border: 1;
	}

	.notice-list-title {
		margin: 0px;
		margin-bottom: 15px;
	}

	.button {
		float: right;
	}

	.notice-check-status {
		margin-left: 10px;
		color: gray;
		font-size: 14px;
	}

	.bottom-tip {
		text-align: center;
		font-size: 15px;
	}

	.notNotification {
		padding-top: 50%;
		text-align: center;
		font-size: 20px;
	}
</style>